<!DOCTYPE html>
<html>
<head>
	<title>canvas</title>
</head>
<body>
	<canvas id="myCanvas" style="border:1px solid;"></canvas>
</body>
<script type="text/javascript">
    //填充颜色渐变的矩形
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    //4个参数分别是开始x坐标，y坐标，结束的x,y坐标
    var my_gradient=ctx.createLinearGradient(0,0,170,0);
    my_gradient.addColorStop(0,"black");
    my_gradient.addColorStop(0.5,"red");
    my_gradient.addColorStop(1,"white");
    ctx.fillStyle=my_gradient;
    ctx.fillRect(20,20,150,100);	
</script>
</html>
